<template>
  <div id="inside-proof">
    <el-collapse-transition>
      <div v-show="searchshow" class="course-search merge">
        <span class="svg-container">
          <svg-icon icon-class="search" />
        </span>
        <el-input v-model.trim="listQuery.honorName" placeholder="请输入名称搜索" class="search-input" @keyup.enter.native="handleFilter" />
        <div class="course-search-btn">
          <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
          <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
          <!-- <span class="course-search-more" @click="searchshow = !searchshow">
            更多筛选条件
            <i class="el-icon-arrow-down" />
          </span> -->
        </div>
      </div>
    </el-collapse-transition>
    <div class="exam-classify">
      <div class="exam-classify-inner">
        <div class="inner-item">
          <ul v-waves :class="{ toggle: classifyone }">
            <li>荣誉分类:</li>
            <li :class="{ active: listQuery.honorType == '' }" @click="classifyOneClick('')">
              全部
            </li>
            <li
              v-for="item in dict.RYFL"
              :key="item.id"
              :class="{ active: listQuery.honorType == item.dictValue }"
              @click="classifyOneClick(item.dictValue)"
            >
              {{ item.dictName }}
            </li>
            <!-- <div class="editClassify">分类管理</div> -->
          </ul>
          <!-- <span @click="classifyOneToggle()"
            ><i v-if="classifyone" class="el-icon-caret-bottom" /><i
              v-if="!classifyone"
              class="el-icon-caret-top"
          /></span> -->
        </div>
      </div>
    </div>
    <div class="btn-container">
      <div class="btn-container-title">
        <span />
      </div>
      <div class="btn-container-btns">
        <el-button class="filter-item" style="margin-left: 10px" @click="handleCreate">添加荣誉</el-button>
        <!-- <el-button
          class="filter-item"
          style="margin-left: 10px;"
          @click="handleMove"
        >移动</el-button> -->
        <el-button class="filter-item" style="margin-left: 10px" @click="handleDeletes">批量删除</el-button>
      </div>
    </div>
    <div v-loading="listLoading" class="course-list">
      <el-row v-if="list.length > 0">
        <el-col v-for="item in list" :key="item.id" :span="5">
          <div class="course-list-item">
            <div class="item-title etc">
              <el-checkbox v-model="checkList" :label="item.id">{{ item.honorName || '' }}</el-checkbox>
              <!-- <div :class="['ispublish', item.status == '0' ? 'active' : '']">
                {{ item.status == "0" ? "已发布" : "未发布" }}
              </div> -->
            </div>
            <div class="item-img">
              <img v-if="item.honorImg" :src="view + item.honorImg">
            </div>
            <div class="item-mark etc3">
              <!-- <p>荣誉时效：{{ item.courseContent || '' }}</p> -->
            </div>
            <div class="item-btns">
              <el-button class="el-button" type="text" @click="editProof(item)">编辑荣誉</el-button>
              <el-dropdown class="el-button more-container">
                <span class="el-dropdown-link">更多操作</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <span style="display: block" @click="delProof(item)">删除荣誉</span>
                  </el-dropdown-item>
                  <!-- <el-dropdown-item :disabled="item.updFlag == '0'">
                    <span style="display: block" @click="editProof(item)"
                      >编辑荣誉</span
                    >
                  </el-dropdown-item> -->
                  <el-dropdown-item>
                    <span v-if="item.honorType === 'RYFL_ZS'" style="display: block" @click="previewProof(item)">预览荣誉</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <span v-if="item.honorType === 'RYFL_ZS'" style="display: block" @click="openCoordinates(item)">设置变量</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-else class="nodata-row">
        <div class="nodata">暂无数据</div>
      </el-row>
    </div>
    <pagination
      v-show="total > 0"
      class="pagination"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog
      v-el-drag-dialog
      destroy-on-close
      fullscreen
      class="coordinatesDialog"
      title="设置荣誉"
      :visible.sync="dialogCoordinates"
      width="auto"
      :close-on-click-modal="false"
      center
    >
      <div class="certificateTemplate">
        <div style="position: relative;">
          <img :draggable="false" class="certificate" :src="view + listInfo.honorImg" alt="">
          <template v-for="(item, index) in configList">
            <p
              :key="index"
              v-drag="[setConfig, index]"
              class="cursor title"
              :style="{
                color: item.color,
                'font-size': item.size + 'px',
                left: item.x + 'px',
                top: item.y + 'px'
              }"
            >
              {{ item.title }}
            </p>
          </template>
        </div>
      </div>
      <div class="settingsSize">
        <el-button style="padding: 8px 30px" type="primary" @click="handleAddConfig">增加配置</el-button>
        <!-- <p></p> -->
        <!-- <el-radio-group v-model="totalStatus">
          <el-radio-button label="0">全部启用</el-radio-button>
          <el-radio-button label="1">全部禁用</el-radio-button>
        </el-radio-group> -->
      </div>
      <el-form ref="ruleForm" :model="form" label-width="100px" class="certificateRuleForm">
        <template v-for="(item, index) in configList">
          <div :key="index">
            <el-row>
              <el-col :span="3">
                <el-form-item label="文字">
                  <el-input v-model="item.title" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="标识符">
                  <el-select v-model="item.logo" placeholder="请选择">
                    <el-option
                      v-for="(item,index) in dict.RYZSPZ"
                      :key="index"
                      :label="item.dictName"
                      :value="item.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="字号">
                  <el-input v-model="item.size" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="颜色">
                  <el-color-picker v-model="item.color" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="类型">
                  <!-- <el-input v-model="item.configType" /> -->
                  <el-select v-model="item.configType" placeholder="请选择">
                    <el-option label="文字" value="text" />
                    <el-option label="图片" value="img" disabled />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="横坐标">
                  <el-input v-model="item.x" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="纵坐标">
                  <el-input v-model="item.y" type="number" />
                </el-form-item>
              </el-col>
              <el-col :span="2" :offset="1">
                <el-button type="danger" icon="el-icon-delete" class="margin-left: 20px" circle @click="handleDelConfig(index)" />
              </el-col>
            </el-row>
          </div>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px" @click="dialogCoordinates = false">取消</el-button>
        <el-button style="padding: 8px 30px" type="primary" @click="submitCoordinates">确定</el-button>
      </div>
    </el-dialog>
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[viewerUrl]" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import drag from '@/utils/drag'
import { proofList, delproof, delsproof, getDictByCode, updateProof, proofdetail, previewImg } from '../api/index'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import waves from '@/directive/waves' // Waves directive
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'ProofList',
  components: {
    Pagination,
    ElImageViewer
  },
  directives: { drag, elDragDialog, waves },
  data() {
    return {
      type: '1',
      searchshow: true,
      listLoading: false,
      dialogCoordinates: false,
      showViewer: false, // 显示查看器
      viewerUrl: '',
      listQuery: {
        page: 1,
        limit: 10,
        honorName: '',
        honorType: ''
      },
      total: 0,
      list: [],
      search: {
        name: '',
        status: ''
      },
      view: '/API-DOCUMENT/document/file/download?id=',
      classifyone: false,
      classifyOneList: [], // 人员类别数组
      checkList: [],
      moveIds: '',
      moveType: '',
      dict: {
        RYFL: [],
        RYZSPZ: []
      },
      listInfo: {},
      textArr: ['name', 'certNo', 'realName', 'idNo', 'certComp', 'userCompName', 'remark', 'certTime', 'limitTime'],
      totalStatus: '',
      configList: [],
      form: {}
      // defaultAvatarImg: 'this.src="' + defaultAvatar + '"',
    }
  },
  watch: {
    totalStatus(val) {
      this.textArr.forEach((item) => {
        this.form[item].status = val
      })
    }
  },
  created() {
    this.getList()
    this.init()
  },
  methods: {
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    // 预览荣誉
    previewProof(row) {
      // console.log(row)
      this.showViewer = true
      return new Promise((resolve, reject) => {
        previewImg({
          manageId: row.id
        })
          .then((res) => {
            console.log(res)
            this.viewerUrl = window.URL.createObjectURL(res.data)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    // 设置坐标
    submitCoordinates() {
      const configList = []
      for (const key in this.configList) {
        configList.push({
          [this.configList[key]['logo']]: {
            ...this.configList[key],
            fontName: ''
          }
        })
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const positionMSG = this.listInfo
      positionMSG['positionContent'] = JSON.stringify(configList)
      return new Promise((resolve, reject) => {
        updateProof(positionMSG)
          .then((response) => {
            loading.close()
            this.dialogCoordinates = false
            if (response.data.data === 1) {
              this.$message({
                message: response.data.msg || '设置成功!',
                type: 'success'
              })
            }
            resolve(response)
          })
          .catch((error) => {
            this.dialogCoordinates = false
            reject(error)
            loading.close()
          })
      })
    },
    // 获取回显
    getCorrdinatesInfo() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return new Promise((resolve, reject) => {
        proofdetail({
          id: this.listInfo.id
        })
          .then((response) => {
            loading.close()
            this.configList = []
            this.dialogCoordinates = true
            if (response.data.data.positionContent) {
              const data = JSON.parse(response.data.data.positionContent)
              data.forEach((item, index) => {
                for (const key in item) {
                  this.configList.push(item[key])
                }
              })
              // console.log(this.configList)
            }
            resolve(response)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    // 增加配置
    handleAddConfig() {
      this.configList.push({
        title: '',
        logo: '',
        size: '14',
        color: '#000',
        configType: 'text',
        x: '0',
        y: '0'
      })
    },
    // 删除配置
    handleDelConfig(location) {
      const configListClone = [...this.configList]
      const data = configListClone.filter((item, index) => index !== location)
      this.$set(this, 'configList', data)
    },
    // 设置配置信息
    setConfig(val, index) {
      this.$set(this.configList[index], 'x', val.x.substring(0, val.x.length - 2))
      this.$set(this.configList[index], 'y', val.y.substring(0, val.y.length - 2))
    },
    // 分类筛选
    classifyOneClick(dictValue) {
      this.listQuery.honorType = dictValue
      console.log(this.listQuery.honorType)
      this.getList()
    },
    init() {
      for (const key in this.dict) {
        this.getDict(key)
      }
    },
    // 获取字典
    getDict(code) {
      console.log('code', code)
      return new Promise((resolve, reject) => {
        getDictByCode(code)
          .then((res) => {
            this.dict[code] = res.data.data && res.data.data.length > 0 ? res.data.data[0].list : []
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    // 打开设置坐标
    openCoordinates(item) {
      console.log('22222', item)
      this.listInfo = item
      this.getCorrdinatesInfo()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resettingBtn() {
      this.listQuery.honorName = ''
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.listQuery.page = 1
      this.getList()
    },
    // 批量删除
    handleDeletes() {
      const arr = []
      if (this.checkList.length > 0) {
        this.checkList.forEach((item) => {
          arr.push(item)
        })
        var ids = arr.join(',')
        this.delsProof(ids)
      } else {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'error'
        })
      }
    },
    delsProof(ids) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return new Promise((resolve, reject) => {
          delsproof({ ids: ids })
            .then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
            .catch((error) => {
              reject(error)
            })
        })
      })
    },
    // 删除荣誉
    delProof(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return new Promise((resolve, reject) => {
          delproof({ id: row.id })
            .then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
            .catch((error) => {
              reject(error)
            })
        })
      })
    },
    // 编辑荣誉
    editProof(row) {
      this.$router.push({
        path: this.$filterPath('addProof'),
        query: {
          type: 'u',
          id: row.id
        }
      })
    },
    // 跳转添加荣誉页面
    handleCreate() {
      // 1
      this.$router.push({
        path: this.$filterPath('addProof'),
        query: {
          type: 'c'
        }
      })
    },
    // 获取荣誉列表
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        honorType: this.listQuery.honorType
      }
      if (this.searchshow) {
        query['honorName'] = this.listQuery.honorName
      } else {
        query['honorName'] = this.listQuery.honorName
      }
      return new Promise((resolve, reject) => {
        proofList(query)
          .then((response) => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch((error) => {
            reject(error)
            this.listLoading = false
          })
      })
    },
    handleChange(item) {
      const _obj = this.dict.RYZSPZ.filter(i => {
        return i.dictName === item.title
      })[0]
      if (_obj) {
        item.logo = _obj.dictValue
      }
    }
  }
}
</script>

<style lang="scss" type="text/scss">
@import '@/styles/mixin.scss';
$dark_gray: #bfced6;
#inside-proof {
  padding: 10px;
  .el-icon-circle-close {
    color: #ffffff;
  }
  .course-search {
    background-color: #fff;
    padding: 0 20px;
    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .search-input {
      width: 60%;
      position: relative;
      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }
      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;
        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }
    .course-search-btn {
      display: inline-block;
      float: right;
      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }
      .course-search-more {
        font-size: 14px;
        font-weight: 500;
        color: $mainColor;
        cursor: pointer;
      }
    }
    &.merge {
      height: 50px;
      line-height: 50px;
    }
    &.separate {
      .course-search-inner {
        padding-top: 10px;
        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }
          .el-input {
            position: relative;
            .el-input__inner {
              border: none;
              padding: 0;
            }
            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .course-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }
  .exam-classify {
    display: flex;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    .exam-classify-inner {
      flex: 1;
      .inner-item {
        position: relative;
        ul {
          // padding: 5px 20px;
          padding: 5px 120px 5px 20px;
          margin: 0;
          box-shadow: 0 5px 10px rgba(254, 90, 97, 0.05);
          max-height: 50px;
          transition: all 1s ease;
          overflow: hidden;
          position: relative;
          li {
            list-style-type: none;
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: 5px;
            cursor: pointer;
            &:first-child {
              margin: 0;
              padding: 0;
              color: #a6a6a6;
            }
            &.active {
              color: $mainColor;
              background: #eaf7ff;
              border-radius: 17px;
            }
          }
          &.toggle {
            max-height: 300px;
          }
          .editClassify {
            height: 48px;
            line-height: 48px;
            position: absolute;
            top: 0;
            right: 0;
            width: 90px;
            background-color: #e44d42;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            font-size: 14px;
            letter-spacing: 2px;
            cursor: pointer;
          }
        }
        span {
          position: absolute;
          right: 100px;
          top: 12px;
          color: $mainColor;
          cursor: pointer;
          font-size: 20px;
        }
      }
    }
    .exam-classify-btn {
      position: relative;
      align-items: center;
      justify-content: center;
      display: flex;
      padding: 0px 30px;
      .el-button {
        width: 106px;
      }
    }
  }
  .btn-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
    }
  }
  .course-list {
    .el-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      .el-col-5 {
        width: 20%;
      }
    }
    .nodata-row.el-row {
      justify-content: center;
    }
    .course-list-item {
      background-color: #ffffff;
      padding: 10px 10px 0;
      margin-right: 10px;
      margin-top: 10px;
      box-shadow: 0 5px 10px rgba(254, 90, 97, 0.05);
      .item-title {
        margin-bottom: 10px;
        overflow: hidden;
        .el-checkbox {
          float: left;
          font-size: 14px;
          color: #333333;
          .el-checkbox__label {
            display: inline-block;
            width: 142px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .el-checkbox__input {
            margin-top: -10px;
          }
          .el-checkbox__input.is-checked .el-checkbox__inner,
          .el-checkbox__input.is-indeterminate .el-checkbox__inner {
            background-color: $mainColor;
            border-color: $mainColor;
          }
          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: $mainColor;
          }
        }
        .ispublish {
          margin-top: 2px;
          font-size: 12px;
          float: right;
          color: #999;
          position: relative;
          &::after {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #999;
            position: absolute;
            top: 5px;
            left: -10px;
          }
          &.active {
            color: #abeb8b;
          }
          &.active::after {
            background-color: #abeb8b;
          }
        }
      }
      .item-img {
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
        &.o {
          height: 130px;
        }
        .pub {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 1);
          opacity: 0.5;
          z-index: 1;
          span {
            font-size: 12px;
            color: #ffffff;
            position: absolute;
            top: 10px;
            right: 10px;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-mark {
        font-size: 12px;
        color: #a6a6a6;
        padding-top: 15px;
        p {
          margin: 0;
          line-height: 1.5;
        }
      }
      .item-btns {
        display: flex;
        margin-top: 10px;
        position: relative;
        .el-button {
          flex: 1;
          span {
            font-size: 12px;
            font-weight: 500;
          }
        }
        .el-dropdown-link {
          cursor: pointer;
          color: #e44d42;
          border: 0;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
        .more-container {
          border: 0;
          margin: 0;
          padding: 11px 0px;
          margin-left: 10px;
          margin-top: 2px;
          line-height: 12px;
        }
        .el-button:hover,
        .el-button:focus {
          background-color: #fff;
        }
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: -10px;
          right: -10px;
          height: 1px;
          background-color: #e2e3e8;
        }
      }
    }
  }
  .pagination {
    padding: 20px 0;
    text-align: center;
  }
  .certificateTemplate {
    /* position: relative; */
    display: flex;
    justify-content: center;
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding: 0;
      margin: 0;
    }
    .cursor {
      cursor: move;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .settingsSize {
    padding: 12px 0;
  }
  .coordinatesDialog {
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  .certificateRuleForm {
    .el-form-item--medium .el-form-item__content {
      display: flex;
    }
  }
  .el-dialog__footer {
    padding-top: 10px !important;
  }
}
</style>
<style lang="scss" type="text/scss" scoped>
#inside-proof {
  .tree-con {
    padding: 20px 0 40px 0;
    /deep/.el-select {
      width: 100%;
    }
  }
}
</style>
